<template>


	<view class="main">
		<u-navbar :fixed="false" title="诊所排班" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="container">

			<view class="top">
				<view class="content">
					<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick'></ren-calendar>
				</view>
			</view>


			<view class="bykq">
				<u-tabs :list="list1" @click="clicktab"></u-tabs>
			</view>

			<!-- "status": 1, //排班状态 1已排班 2正常出勤 3请假 4调休 5迟到 6早退 7旷工 8缺卡 -->
			<!-- "type": 2, //排班 1上班 2休息 -->

			<z-paging ref="paging" v-model="listData" @query="queryList" usePageScroll>
				<view class="sxb" v-for="(item, index) in listData" :key="index">
					<view class="sxbb ">
						<view class="row space-between">
							<view class="row">
								<view>
									<image class="sbk" :src="item.operator.avatar"></image>
								</view>
								<view class="sbdka ">
									<view class="sbdkwz">{{item.operator.name}}</view>
									<view class="sbdktime">09:00 - 18:00</view>
								</view>
							</view>
							<view class="xbsj center" v-if="item.status==1">已排班</view>
							<view class="xbsj center" v-if="item.status==2">正常出勤</view>
							<view class="xbsj center" v-if="item.status==3">请假</view>
							<view class="xbsj center" v-if="item.status==4">调休</view>
							<view class="xbsj center" v-if="item.status==5">迟到</view>
							<view class="xbsj center" v-if="item.status==6">早退</view>
							<view class="xbsj center" v-if="item.status==7">旷工</view>
							<view class="xbsj center" v-if="item.status==8">缺卡</view>
						</view>
					</view>
				</view>
			</z-paging>

		</view>


		<view class="ttbb" @click="toUrl('/pages/scheduling/management')">
			<image class="tj" src="/static/images/tj.png"></image>
		</view>


	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
	import api_scheduling from '@/api/scheduling.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';

	export default {
		mixins: [ZPMixin],
		components: {
			RenCalendar
		},
		data() {
			return {
				type: 1, //1上班 2休息
				access_token: null,
				date: null,
				userInfo: null,
				list1: [{
					name: '正常班',
				}, {
					name: '休息',
				}],
				curDate: '',
				markDays: [],
				listData: []
			};
		},
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.date = this.getNowDate();
				this.userInfo = uni.getStorageSync('userInfo');
				console.log('员工用户信息', this.userInfo);
				// this.getSchedulingListFuc(); //获取诊所排班列表
			}
		},

		methods: {
			
			
			
			async queryList(pageNo, pageSize) {
				var per = {
					no_page: pageNo,
					page_size: pageSize,
					date: this.date,
				}
				if (this.type) {
					per.type = this.type;
				}
				const res = await api_scheduling.getSchedulingList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}
			},


			//获取诊所排班列表
			// async getSchedulingListFuc() {
			// 	var per = {
			// 		date: this.date,
			// 		no_page: 1,
			// 		page_size: 100,
			// 	}
				
			// 	if (this.type) {
			// 		per.type = this.type;
			// 	}
			// 	const res = await api_scheduling.getSchedulingList(per);
			// 	if (res.code == 1) {
			// 		this.listData = res.data.list;
			// 		return;
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },

			clicktab(item) {
				if (item.index == 0) {
					this.type = 1
				}
				if (item.index == 1) {
					this.type = 2
				}

				// this.getSchedulingListFuc();
				this.$refs.paging.reload();
			},

			//获取当前时间
			getNowDate() {
				const now = new Date();
				// 格式化日期为 YYYY-MM-DD
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（0-11），+1 后补零
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，补零
				const formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式为 2024-10-12
				return formattedDate;
			},
			toUrl(url) {
				this.navTo(url);
			},
			onDayClick(data) {
				this.curDate = data.date;
				this.date = this.curDate;
				// this.getSchedulingListFuc();
				this.$refs.paging.reload();
			},
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 1400rpx;
		background-color: #f6f7f9;

	}

	.content {

		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
			height: 100rpx;
			color: #b89249;
			background-color: #21191b;
		}
	}

	.top {
		margin-top: 15rpx;
	}

	.sxb {
		padding: 0 32rpx;
		margin-top: 30rpx;
		width: 100%;

	}

	.bykq {
		padding: 0 32rpx;
		margin-top: 20rpx;

	}

	.sxbb {
		height: 160rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 20px;
	}

	.sbk {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
	}



	.sbdka {
		margin-left: 60rpx;
		width: 350rpx;
	}

	.sbdkwz {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;

	}

	.sbdktime {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xbsj {
		width: 128rpx;
		height: 40rpx;
		background: #1FA194;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.tj {
		width: 166rpx;
		height: 168rpx;
	}

	.ttbb {
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
	}
</style>